<template>
  <div class="page">
    <v-header/>
    <div class="body">
      <!--            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"-->
      <!--                 width="12px" height="12px" fill="#636262" mr="4px" class="sc-bttaWv dbctkE">-->
      <!--                <use xlink:href="/assets/svg/sprite.svg?v=5.2#polygon"></use>-->
      <!--            </svg>-->
      <!--            <div class="searchForm">-->
      <!--                <el-input-->
      <!--                        placeholder="请输入内容"-->
      <!--                        prefix-icon="el-icon-search"-->
      <!--                        maxlength="10"-->
      <!--                        v-model="input2">-->
      <!--                </el-input>-->
      <!--            </div>-->

      <div class="roll">
        <i class="el-icon-bell"></i>
        <ul class="list">
          <li v-for="(item, index) in ulList"
              :key="item.id"
              :class="!index && play ? 'toUp' : ''">
            {{ item.msg }}
          </li>
        </ul>
      </div>
      <div>
        <el-table
          @row-click="openDetails"
          :row-class-name="tableRowClassName"
          :data="tableData"
          style="width: 100%;margin-top: 30px;"
          v-loading="loading"
          element-loading-background="rgba(255, 255, 255, 1)"
          :header-cell-style="tableHeaderColor">
          <el-table-column
            type="index">
          </el-table-column>
          <el-table-column
            label="游戏名"
            width="250">
            <template slot-scope="scope">
              <el-row type="flex" justify="center" align="middle">
                <el-col :span="6"><img class="game-logo" :src="scope.row.icon"></el-col>
                <el-col :span="24">
                  <div class="game-chinese-name">{{scope.row.game_name_cn}}</div>
                  <div class="game-name">{{scope.row.game_name_en}}</div>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column
            prop="game_history.balance_fiat"
            sortable
            label="流通市值(¥)/环比增长">
            <template slot-scope="scope">
              <el-col :span="24">
                <div class="game-chinese-name">{{numberFormat(scope.row.game_history.balance_fiat)}}
                </div>
                <div class="game-name" style="color: #008555"
                     v-if="scope.row.game_history.balance_fiat_change>=0">
                  +{{scope.row.game_history.balance_fiat_change}}%
                </div>
                <div class="game-name" style="color: #d60f2a" v-else>
                  {{scope.row.game_history.balance_fiat_change}}%
                </div>
              </el-col>
            </template>
          </el-table-column>
          <el-table-column
            prop="game_history.user_activity"
            sortable
            label="活跃用户数">
            <template slot-scope="scope">
              <el-col :span="24">
                <div class="game-chinese-name">{{numberFormat(scope.row.game_history.activity_user)}}
                </div>
                <div class="game-name" style="color: #008555"
                     v-if="scope.row.game_history.activity_user_change>=0">
                  +{{scope.row.game_history.activity_user_change}}%
                </div>
                <div class="game-name" style="color: #d60f2a" v-else>
                  {{scope.row.game_history.activity_user_change}}%
                </div>
              </el-col>
            </template>
          </el-table-column>
          <el-table-column
            sortable
            label="成交量">
            <template slot-scope="scope">
              <el-col :span="24">
                <div class="game-chinese-name">
                  {{numberFormat(scope.row.game_history.transaction_volume_fiat)}}
                </div>
                <div class="game-name" style="color: #008555"
                     v-if="scope.row.game_history.transaction_volume_fiat_change>=0">
                  {{scope.row.game_history.transaction_volume_fiat_change}}%
                </div>
                <div class="game-name" style="color: #d60f2a" v-else>
                  {{scope.row.game_history.transaction_volume_fiat_change}}%
                </div>
              </el-col>
            </template>
          </el-table-column>
          <el-table-column
            label="所在链">
            <template slot-scope="scope">
              <el-col :span="24">
                <el-row type="flex" justify="start" align="middle">
                  <el-col :span="2">
                    <div class="chain-icon-box">
                      <img class="chain-icon" :src="scope.row.chain_info[0].icon">
                    </div>
                  </el-col>
                  <el-col>
                    <div class="game-chinese-name">{{scope.row.chain_info[0].chain_name_en}}</div>
                  </el-col>

                </el-row>
              </el-col>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" class="row-bg" justify="end">
          <el-col :span="8">
            <div style="margin: 30px;margin-right: 156px">
              <el-pagination
                @current-change="handleCurrentChange"
                v-if="total"
                background
                :page-size="pageSize"
                layout="prev, pager, next"
                :total="total">
              </el-pagination>
            </div>

          </el-col>
        </el-row>

      </div>
    </div>
  </div>
</template>

<script>
  import vHeader from "../components/Header.vue";
  import {gameList} from "../api/data.js"

  export default {
    components: {
      vHeader,
    },
    name: 'HelloWorld',
    props: {
      msg: String
    },
    mounted() {
      setInterval(this.startPlay, 4000);
    },
    created() {
      this.getGameList();
    },
    data() {
      return {
        tableData: [],
        page: 1,
        pageSize: 10,
        search: '',
        total: 0,
        loading: true,
        ulList: [
          {msg: "在过去24小时ETH链有新游戏发布"},
          {msg: "CryptoMines产今日活跃用户达到了21.47万"},
          {msg: "瓦纳卡农场流通市值达到了1.01亿"},
          {msg: "二进制X今日成交量达到了144.95万"},
          {msg: "在过去24小时BSC链有新游戏发布"},
        ],
        play: false,
        timer: null,
      }
    },
    methods: {
      startPlay() {
        let that = this;
        that.play = true; //开始播放
        that.timer = setTimeout(() => {  //创建并执行定时器
          that.ulList.push(that.ulList[0]); //将第一条数据塞到最后一个
          that.ulList.shift(); //删除第一条数据
          that.play = false; //暂停播放
        }, 500);
        console.log(that.timer);
      },
      tableHeaderColor({row, column, rowIndex, columnIndex}) {
        console.log(rowIndex)
        if (rowIndex === 0) {
          return 'background-color: #F0F;font-weight: 500;'
        }
      },
      tableRowClassName({row, rowIndex}) {
        return "table-row"
      },
      getGameList() {
        this.loading = true
        gameList({pageSize: this.pageSize, search: this.search, page: this.page, rank_type: 1}).then((res) => {
          this.tableData = res.data.game_list
          this.total = res.data.total
          console.log(this.total)
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      },
      numberFormat(value) {
        var param = {};
        var k = 10000,
          sizes = ['', '万', '亿', '万亿'],
          i;
        if (value < k) {
          param.value = value
          param.unit = ''
        } else {
          i = Math.floor(Math.log(value) / Math.log(k));
          param.value = ((value / Math.pow(k, i))).toFixed(2);
          param.unit = sizes[i];
        }
        return param.value + param.unit;
      },
      openDetails(res) {
        window.open(res.website)
      },
      handleCurrentChange(val) {
        this.tableData = [];
        this.page = val
        this.getGameList()
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .page {
    height: 100%;
    /*background: #f4f6fa;*/
  }

  .body {
    width: 1280px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-height: calc(100vh - 244px);
    margin: 0 auto 156px;
    position: relative;
  }

  .searchForm {
    width: 312px;
    /*position: absolute;*/
    margin-top: 30px;
    /*margin-top: -18px;*/
    /*left: 0px;*/
  }


  .el-table tbody tr:hover > td {
    background-color: #ebf7ff !important
  }

  .game-logo {
    width: 26px;
    margin-right: 20px;
  }

  .game-chinese-name {
    font-size: 14px;
    color: #0b1721;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .game-name {
    font-size: 12px;
    color: #858a90;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .black-value {
    color: #0b1721;
    font-weight: 500;
    font-size: 14px;
  }

  .chain-icon-box {
    display: flex;
    flex-flow: row;
  }

  .chain-icon {
    width: 15px;
    margin-right: 5px;
  }

  .roll {
    width: 100%;
    height: 30px; /*关键样式*/
    line-height: 30px; /*关键样式*/
    background: #fff;
    margin-bottom: 24px;
    /*box-shadow: 4px 0 10px rgba(226, 226, 226, 0.3);*/
    /*padding: 0 20px;*/
    /*color: #f5212d;*/
    font-size: 12px;
    color: #0b1721;
    display: flex;
  }

  .roll-line {
    width: 2px;
    height: 100%;
    background: #dee2e6;
    margin: 0 20px 0 -20px;
  }

  .el-icon-bell {
    color: #343a40;
    font-size: 16px;
    line-height: 60px !important; /*关键样式*/
    margin-right: 10px;
    color: #0b69ef;
    font-weight: 500;
  }

  .toUp {
    margin-top: -60px; /*关键样式*/
    transition: all 1s; /*关键样式*/
  }

  .list {
    list-style: none;
    width: 100%;
    text-align: center;
    overflow: hidden; /*关键样式*/
    height: 60px; /*关键样式*/
    padding: 0;
    margin: 0;
  }

  li {
    text-align: left;
    height: 60px; /*关键样式*/
    line-height: 60px; /*关键样式*/
  }

</style>
